<!doctype html>
<html>
	<head>
		<title>Chart.js | HTML5 Charts for your website.</title>
		
		<meta name="description" content="Open source HTML5 charts using the canvas tag. Chart.js is an easy way to include animated graphs on your website."/>

		<script type="text/javascript" src="//use.typekit.net/puc1imu.js"></script>
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
		<script type="text/javascript" src="assets/Chart.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script>
		/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-canvas-shiv-load
 */
        window.Modernizr = function (a, b, c) {
            function t(a) {
                i.cssText = a
            }
            function u(a, b) {
                return t(prefixes.join(a + ";") + (b || ""))
            }
            function v(a, b) {
                return typeof a === b
            }
            function w(a, b) {
                return !!~("" + a).indexOf(b)
            }
            function x(a, b, d) {
                for (var e in a) {
                    var f = b[a[e]];
                    if (f !== c) return d === !1 ? a[e] : v(f, "function") ? f.bind(d || b) : f
                }
                return !1
            }
            var d = "2.6.2", e = {}, f = b.documentElement, g = "modernizr", h = b.createElement(g), i = h.style, j,
                k = {}.toString, l = {}, m = {}, n = {}, o = [], p = o.slice, q, r = {}.hasOwnProperty, s;
            !v(r, "undefined") && !v(r.call, "undefined") ? s = function (a, b) {
                return r.call(a, b)
            } : s = function (a, b) {
                return b in a && v(a.constructor.prototype[b], "undefined")
            }, Function.prototype.bind || (Function.prototype.bind = function (b) {
                var c = this;
                if (typeof c != "function") throw new TypeError;
                var d = p.call(arguments, 1), e = function () {
                    if (this instanceof e) {
                        var a = function () {
                        };
                        a.prototype = c.prototype;
                        var f = new a, g = c.apply(f, d.concat(p.call(arguments)));
                        return Object(g) === g ? g : f
                    }
                    return c.apply(b, d.concat(p.call(arguments)))
                };
                return e
            }), l.canvas = function () {
                var a = b.createElement("canvas");
                return !!a.getContext && !!a.getContext("2d")
            };
            for (var y in l) s(l, y) && (q = y.toLowerCase(), e[q] = l[y](), o.push((e[q] ? "" : "no-") + q));
            return e.addTest = function (a, b) {
                if (typeof a == "object") for (var d in a) s(a, d) && e.addTest(d, a[d]); else {
                    a = a.toLowerCase();
                    if (e[a] !== c) return e;
                    b = typeof b == "function" ? b() : b, typeof enableClasses != "undefined" && enableClasses && (f.className += " " + (b ? "" : "no-") + a), e[a] = b
                }
                return e
            }, t(""), h = j = null, function (a, b) {
                function k(a, b) {
                    var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement;
                    return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild)
                }
                function l() {
                    var a = r.elements;
                    return typeof a == "string" ? a.split(" ") : a
                }
                function m(a) {
                    var b = i[a[g]];
                    return b || (b = {}, h++, a[g] = h, i[h] = b), b
                }
                function n(a, c, f) {
                    c || (c = b);
                    if (j) return c.createElement(a);
                    f || (f = m(c));
                    var g;
                    return f.cache[a] ? g = f.cache[a].cloneNode() : e.test(a) ? g = (f.cache[a] = f.createElem(a)).cloneNode() : g = f.createElem(a), g.canHaveChildren && !d.test(a) ? f.frag.appendChild(g) : g
                }
                function o(a, c) {
                    a || (a = b);
                    if (j) return a.createDocumentFragment();
                    c = c || m(a);
                    var d = c.frag.cloneNode(), e = 0, f = l(), g = f.length;
                    for (; e < g; e++) d.createElement(f[e]);
                    return d
                }
                function p(a, b) {
                    b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function (c) {
                        return r.shivMethods ? n(c, a, b) : b.createElem(c)
                    }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + l().join().replace(/\w+/g, function (a) {
                        return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")'
                    }) + ");return n}")(r, b.frag)
                }
                function q(a) {
                    a || (a = b);
                    var c = m(a);
                    return r.shivCSS && !f && !c.hasCSS && (c.hasCSS = !!k(a, "article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")), j || p(a, c), a
                }
                var c = a.html5 || {}, d = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
                    e = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,
                    f, g = "_html5shiv", h = 0, i = {}, j;
                (function () {
                    try {
                        var a = b.createElement("a");
                        a.innerHTML = "<xyz></xyz>", f = "hidden" in a, j = a.childNodes.length == 1 || function () {
                            b.createElement("a");
                            var a = b.createDocumentFragment();
                            return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined"
                        }()
                    } catch (c) {
                        f = !0, j = !0
                    }
                })();
                var r = {
                    elements: c.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",
                    shivCSS: c.shivCSS !== !1,
                    supportsUnknownElements: j,
                    shivMethods: c.shivMethods !== !1,
                    type: "default",
                    shivDocument: q,
                    createElement: n,
                    createDocumentFragment: o
                };
                a.html5 = r, q(b)
            }(this, b), e._version = d, e
        }(this, this.document), function (a, b, c) {
            function d(a) {
                return "[object Function]" == o.call(a)
            }
            function e(a) {
                return "string" == typeof a
            }
            function f() {
            }
            function g(a) {
                return !a || "loaded" == a || "complete" == a || "uninitialized" == a
            }
            function h() {
                var a = p.shift();
                q = 1, a ? a.t ? m(function () {
                    ("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1)
                }, 0) : (a(), h()) : q = 0
            }
            function i(a, c, d, e, f, i, j) {
                function k(b) {
                    if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) {
                        "img" != a && m(function () {
                            t.removeChild(l)
                        }, 50);
                        for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload()
                    }
                }
                var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = {t: d, s: c, e: f, a: i, x: j};
                1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function () {
                    k.call(this, r)
                }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l))
            }
            function j(a, b, c, d, f) {
                return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this
            }
            function k() {
                var a = B;
                return a.loader = {load: j, i: 0}, a
            }
            var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString,
                p = [], q = 0, r = "MozAppearance" in l.style, s = r && !!b.createRange().compareNode,
                t = s ? l : n.parentNode, l = a.opera && "[object Opera]" == o.call(a.opera), l = !!b.attachEvent && !l,
                u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function (a) {
                    return "[object Array]" == o.call(a)
                }, x = [], y = {}, z = {
                    timeout: function (a, b) {
                        return b.length && (a.timeout = b[0]), a
                    }
                }, A, B;
            B = function (a) {
                function b(a) {
                    var a = a.split("!"), b = x.length, c = a.pop(), d = a.length,
                        c = {url: c, origUrl: c, prefixes: a}, e, f, g;
                    for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g));
                    for (f = 0; f < b; f++) c = x[f](c);
                    return c
                }
                function g(a, e, f, g, h) {
                    var i = b(a), j = i.autoCallback;
                    i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function () {
                        k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2
                    })))
                }
                function h(a, b) {
                    function c(a, c) {
                        if (a) {
                            if (e(a)) c || (j = function () {
                                var a = [].slice.call(arguments);
                                k.apply(this, a), l()
                            }), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function () {
                                var b = 0, c;
                                for (c in a) a.hasOwnProperty(c) && b++;
                                return b
                            }(), a) a.hasOwnProperty(n) && (!c && !--m && (d(j) ? j = function () {
                                var a = [].slice.call(arguments);
                                k.apply(this, a), l()
                            } : j[n] = function (a) {
                                return function () {
                                    var b = [].slice.call(arguments);
                                    a && a.apply(this, b), l()
                                }
                            }(k[n])), g(a[n], j, b, n, h))
                        } else !c && l()
                    }
                    var h = !!a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n;
                    c(h ? a.yep : a.nope, !!i), i && c(i)
                }
                var i, j, l = this.yepnope.loader;
                if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l)
            }, B.addPrefix = function (a, b) {
                z[a] = b
            }, B.addFilter = function (a) {
                x.push(a)
            }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function () {
                b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete"
            }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function (a, c, d, e, i, j) {
                var k = b.createElement("script"), l, o, e = e || B.errorTimeout;
                k.src = a;
                for (o in d) k.setAttribute(o, d[o]);
                c = j ? h : c || f, k.onreadystatechange = k.onload = function () {
                    !l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null)
                }, m(function () {
                    l || (l = 1, c(1))
                }, e), i ? k.onload() : n.parentNode.insertBefore(k, n)
            }, a.yepnope.injectCss = function (a, c, d, e, g, i) {
                var e = b.createElement("link"), j, c = i ? h : c || f;
                e.href = a, e.rel = "stylesheet", e.type = "text/css";
                for (j in d) e.setAttribute(j, d[j]);
                g || (n.parentNode.insertBefore(e, n), m(c, 0))
            }
        }(this, document), Modernizr.load = function () {
            yepnope.apply(window, [].slice.call(arguments, 0))
        };
        </script>
		<!--[if lte IE 8]>
			<script type="text/javascript" src="assets/excanvas.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="styles.css"/>
	</head>
	<body>
	<div class="redBorder"></div>
	<div class="greenBorder"></div>
	<div class="yellowBorder"></div>
	<header>
		<hgroup>
			<h1>Chart.js</h1>
			<h2>Easy, object oriented client side graphs for designers and developers</h2>
		</hgroup>
		
		<canvas id="introChart" width="489" height="246"></canvas>
		
		<a class="btn red" href="docs">Documentation</a><a class="btn blue" href="https://github.com/nnnick/Chart.js">Download</a>
	</header>
	<section id="features">
		<article>
			<img src="assets/6charts.png">
			<h3>6 Chart types</h3>
			<p>Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.</p>
		</article>
		<article>
			<img src="assets/html.png">
			<h3>HTML5 Based</h3>
			<p>Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.</p>
		</article>
		<article>
			<img src="assets/simple.png">
			<h3>Simple and flexible</h3>
			<p>Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.</p>
		</article>
	</section>
	<section id="examples">
		<article id="lineChart" class="hidden">
			<div class="half">
				<h2>Line charts</h2>
				<p>Line graphs are probably the most widely used graph for showing trends.</p>
				<p>Chart.js has a ton of customisation features for line graphs, along with support for multiple datasets to be plotted on one chart.</p>
			</div>
			<div class="canvasWrapper">
				<canvas id="lineChartCanvas" width="449" height="300"></canvas>		
			</div>
		</article>
		
		<article id="barChart" class="hidden">
			<div class="canvasWrapper">
				<canvas id="barChartCanvas" width="449" height="300"></canvas>		
			</div>
			<div class="half">
				<h2>Bar charts</h2>
				<p>Bar graphs are also great at showing trend data.</p>
				<p>Chart.js supports bar charts with a load of custom styles and the ability to show multiple bars for each x value.</p>
			</div>
		</article>

		<article id="radarChart" class="hidden">
			<div class="half">
				<h2>Radar charts</h2>
				<p>Radar charts are good for comparing a selection of different pieces of data.</p>
				<p>Chart.js supports multiple data sets plotted on the same radar chart. It also supports all of the customisation and animation options you'd expect.</p>
			</div>
			<div class="canvasWrapper">
				<canvas id="radarChartCanvas" width="449" height="300"></canvas>		
			</div>
		</article>
		
		<article id="pieChart" class="hidden">
			<div class="canvasWrapper">
				<canvas id="pieChartCanvas" width="449" height="300"></canvas>		
			</div>
			<div class="half">
				<h2>Pie charts</h2>
				<p>Pie charts are great at comparing proportions within a single data set.</p>
				<p>Chart.js shows animated pie charts with customisable colours, strokes, animation easing and effects.</p>
			</div>
		</article>

		<article id="polarAreaChart" class="hidden">
			<div class="half">
				<h2>Polar area charts</h2>
				<p>Polar area charts are similar to pie charts, but the variable isn't the circumference of the segment, but the radius of it. </p>
				<p>Chart.js delivers animated polar area charts with custom coloured segments, along with customisable scales and animation.</p>
			</div>
			<div class="canvasWrapper">
				<canvas id="polarAreaChartCanvas" width="449" height="300"></canvas>		
			</div>
		</article>

		<article id="doughnutChart" class="hidden">
			<div class="canvasWrapper">
				<canvas id="doughnutChartCanvas" width="449" height="300"></canvas>		
			</div>
			<div class="half">
				<h2>Doughnut charts</h2>
				<p>Similar to pie charts, doughnut charts are great for showing proportional data.</p>
				<p>Chart.js offers the same customisation options as for pie charts, but with a custom sized inner cutout to turn your pies into doughnuts.</p>
			</div>
		</article>
		<h3>Like what you see? <a href="https://github.com/nnnick/Chart.js">Download Chart.js on Github</a> or <a href="docs">read detailed documentation</a></h3>
	</section>
	<footer>
		<p>A project by <a href="http://www.nickdownie.com">Nick Downie</a></p>
		
	</footer>
	<script src="assets/effects.js"></script>
	<script type="text/javascript">
	
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-28909194-3']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
	</body>
</html>
